<template>
    <div style="width: 95%;margin-left: 0;">
        <el-button type="primary" :icon="Plus" @click="showDialog()">新增一级菜单</el-button>
    </div>
    <el-table :data="menuObj.menus" style="width: 100%;" row-key="mid" lazy border :load="findMenuById"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column prop="mid" label="菜单编号" wdith="120px" fixed />
        <el-table-column label="父级编号" width="200px">
            <!-- 插槽 -->
            <template #default="scope">
                <el-tag v-if="scope.row.pid == 0" type="primary" style="width: 65px;">
                    一级菜单
                </el-tag>
                <el-tag v-else type="danger" style="width: 65px;">
                    二级菜单
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="mname" label="菜单名称" wdith="250px" />
        <el-table-column prop="route" label="路由地址" wdith="250px" />
        <el-table-column prop="icon" label="图标" wdith="120px">
            <template #default="scope">
                <el-icon v-if="scope.row.icon">
                    <component :is="scope.row.icon" />
                </el-icon>
            </template>
        </el-table-column>
        <el-table-column prop="createtime" label="创建时间" wdith="150px" />
        <el-table-column prop="updatetime" label="修改时间" wdith="150px" fixed="right" />
        <el-table-column label="操作" fixed="right">
            <template #default="scope">
                <el-tooltip class="box-item" effect="dark" content="为这个菜单添加子菜单" placement="top-start">
                    <el-button type="primary" size="small" icon="Plus" @click="addChildMenu(scope.row.mid)"
                        v-if="!scope.row.pid" style="margin: 0%;"></el-button>
                </el-tooltip>
                <el-tooltip class="box-item" effect="dark" content="修改这个菜单" placement="top-start">
                    <el-button type="success" size="small" icon="Edit" @click="handleEdit(scope.row)"
                        style="margin: 0%;"></el-button>
                </el-tooltip>
                <el-tooltip class="box-item" effect="dark" content="删除这个菜单" placement="top-start">
                    <el-button type="danger" size="small" icon="Delete" @click="handleDelete(scope.row.mid)"
                        style="margin: 0%;"></el-button>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>

    <!-- 添加 和 修改 菜单dialog -->
    <el-dialog title="菜单信息" v-model="dialogObj.dialogFormVisible" width="35%">
        <el-form :model="menuObj.menu" class="demo-form-inline" label-width="80px">
            <el-form-item label="名称">
                <el-input v-model="menuObj.menu.mname" placeholder="名称" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="路由">
                <el-input v-model="menuObj.menu.route" placeholder="路由地址" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="显示图片">
                <el-input v-model="menuObj.menu.icon" placeholder="图标" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()" v-text="dialogObj.formBtn"></el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script setup lang="ts">
import request from '../utils/request';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Delete, Edit } from '@element-plus/icons-vue'
/**声明menu类型*/
interface Menu {
    mid: string | number,
    pid: string | number,
    mname: string,
    route: string,
    icon: string,
    createtime: Date
    updatetime: Date,
    children: Menu[]
}

//定义变量接收menu数据
let menuObj = reactive({
    menus: [] as Menu[],
    menu: {} as Menu,
})
// 定义对话框对象
const dialogObj = reactive({
    dialogFormVisible: false,
    formBtn: ''
})
/**
 * 
 * 根据mid删除菜单
 */
const handleDelete = (mid: string | number) => {
    request.delete("/menu/delById", { params: { mid: mid } }).then(res => {
        if (res.data.success) {
            ElMessage.success("删除成功");
            //调用查询方法
            findMenuById(0);
        }
    }).catch(err => {
        ElMessage.warning("请求失败!");
    })
}

//显示修改对话框函数
const handleEdit = (row: Menu) => {
    menuObj.menu = row
    dialogObj.formBtn = "修改";
    dialogObj.dialogFormVisible = true;
}
//新增一级菜单
const showDialog = () => {
    //设置pid
    menuObj.menu.pid = 0;
    dialogObj.formBtn = "添加";
    //显示对话框
    dialogObj.dialogFormVisible = true;
}
//新增或者修改菜单
const submitForm = () => {
    //判断当前操作是新增或是修改
    if (dialogObj.formBtn == '添加') {
        //调用后端接口
        request.post("/menu/insertMenu", menuObj.menu).then(res => {
            if (res.data.success) {
                ElMessage.success("添加成功");
                //调用查询方法
                findMenuById(0);
                //关闭对话框
                dialogObj.dialogFormVisible = false;
            } else {
                ElMessage.error("新增失败!");
            }
        }).catch(err => {
            ElMessage.warning("请求失败!");
        })
    } else { //表示修改操作
        //调用后端接口
        request.put("/menu/updateMenuById", menuObj.menu).then(res => {
            if (res.data.success) {
                ElMessage.success("修改成功");
                //调用查询方法
                findMenuById(0);
                //关闭对话框
                dialogObj.dialogFormVisible = false;
            }
        }).catch(err => {
            ElMessage.warning("请求失败!");
        })


    }
    //清空表单
    clearForm();
}

//显示对话框
const addChildMenu = (pid: string | number) => {
    //设置pid
    menuObj.menu.pid = pid;
    dialogObj.formBtn = "添加";
    //显示对话框
    dialogObj.dialogFormVisible = true;
}
//重置表单函数
const resetForm = () => {
    clearForm();
}
//清空表单函数
const clearForm = () => {
    menuObj.menu.mname = "";
    menuObj.menu.route = "";
    menuObj.menu.icon = "";
}

//查询
const findMenuById = (menuId: string | number) => {
    // console.log("menuId = " + menuId);

    request.get("/menu/findParentMenus", { params: { id: menuId } }).then(res => {
        // console.log(res);
        if (res.data.success) {
            menuObj.menus = res.data.data;
        }
    }).catch(err => {
        ElMessage.error("请求失败!")
    })
}
onMounted(() => {
    //查询菜单信息
    findMenuById(0)
})
</script>
<style scoped></style>